<script lang="ts" setup>
	import { ref } from 'vue'
	import { useRoute } from 'vue-router'
	import {
		PlayCircleFilled,
		ExportOutlined,
		StarOutlined
	} from "@ant-design/icons-vue"
	import { message } from 'ant-design-vue';
	import { CourseApi } from '@/api/course'
	import { useUserStore } from '@/stores/user'
	let chapterList = ref<any>([])
	const route = useRoute()
	const userStore = useUserStore()
	let id = route.query.id
	let chapterId = ref(0)
	let playId = ref(0)
	let file = ref('')
	let activeKey = ref(0)
	let detail = ref<any>({})
	const getDetail = () => {
		CourseApi.getDetail({
			id: id,
		}).then((res : any) => {
			if (res.code == 1) {
				detail.value = res.data
			}
		})
	}
	const getChapter = () => {
		CourseApi.getChapter({
			courseId: id,
		}).then((res : any) => {
			if (res.code == 1) {
				if (res.data.length == 0) {
					message.warning("暂无内容")
					return
				}
				chapterList.value = [...res.data]
				file.value = chapterList.value[0].children[0].file
				chapterId = ref(chapterList.value[activeKey.value].id)
				playId = ref(chapterList.value[activeKey.value].children[0].id)
			}
		})
	}
	getDetail()
	getChapter()
	const doPlay = (index : number, index1 : number) => {
		file.value = chapterList.value[index].children[index1].file
		chapterId.value = chapterList.value[index].id
		playId.value = chapterList.value[index].children[index1].id
		playVideo()
	}
	const copyUrl = () => {
		var textArea = document.createElement("textarea");
		textArea.value = window.location.href;
		document.body.appendChild(textArea);
		textArea.select();
		document.execCommand("copy");
		document.body.removeChild(textArea);
		message.success('链接已复制');

	}
	const playVideo = () => {
		let readUser = detail.value.readUser.split(",")
		if (userStore.userInfo && readUser.indexOf(userStore.userInfo.id) == -1) {
			CourseApi.addRead({
				id: id
			}).then((res : any) => {
				if (res.code == 1) {
					detail.value = res.data
				}
			})
		}
		let video = document.getElementById('video') as HTMLVideoElement
		video.play()
	}
</script>

<template>
	<div class="content">
		
		<div class="video-box">
			<div>
				<video :src="file" controls id="video"></video>
				<div class="bottom-box">
					<div class="collection">
						<StarOutlined class="icon" />收藏
					</div>
					<div class="line">
					</div>
					<div class="share" @click="copyUrl()">
						<ExportOutlined class="icon" />
						分享
					</div>
				</div>
			</div>
			<div class="list-box">
				<div class="title">共{{chapterList.length}}个章节</div>
				<a-collapse v-model:activeKey="activeKey" ghost>
					<a-collapse-panel :header="item.name" :show-arrow="false" v-for="(item,index) in chapterList"
						:key="index" class="custom-panel" :class="{'custom-panel-active':chapterId==item.id}">
						<div class="li" v-for="(li,index1) in item.children" :key="index1" @click="doPlay(index,index1)"
							:class="{'li-active':playId==li.id}">
							<PlayCircleFilled class="icon" />
							<div class="li-content">
								<div class="name">
									{{li.title}}
								</div>
								<div class="time">
									{{li.duration}}
								</div>
							</div>
						</div>
					</a-collapse-panel>
				</a-collapse>
			</div>
		</div>
		<div class="footer">
			<div class="left">
				<div class="title">
					{{detail.title}}
				</div>
				<div class="synopsis">
					{{detail.synopsis}}
				</div>
				<div class="text">
					已有{{detail.read}}人学习
				</div>
			</div>
			<div class="right">
				<a-button type="primary" class="play-btn" @click="playVideo">
					开始学习
				</a-button>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.content {
		padding-top: 120px;

		.video-box {
			width: 1280px;
			margin: 0 auto;
			background-color: #1b2128;
			display: flex;

			#video {
				width: 890px;
				height: 500px;
				background-color: #000;
			}

			.bottom-box {
				display: flex;
				align-items: center;
				height: 75px;
				padding-left: 22px;
				color: #8898a3;

				.collection {
					display: flex;
					align-items: center;
					color: #8898a3;
					padding: 6px 12px;
					background-color: #576470;
					border-radius: 16px;
					cursor: pointer;

					.icon {
						margin-right: 5px;
					}
				}

				.line {
					height: 14px;
					width: 2px;
					background-color: #576470;
					margin: 0 26px;
				}

				.share {
					display: flex;
					align-items: center;
					cursor: pointer;

					.icon {
						margin-right: 5px;
					}
				}
			}

			.list-box {
				width: 390px;
				padding-right: 25px;
				height: 575px;
				overflow-y: auto;


				.title {
					color: #c1c6cc;
					font-size: 18px;
					padding: 20px 0 20px 28px;
					border-bottom: 1px solid #000;
				}

				.custom-panel {
					--color: #fff;
					--title-opacity: 0.6;
					--text-opacity: 0.4;
				}

				.custom-panel ::v-deep .ant-collapse-header {
					color: #fff;
					opacity: 0.6;
				}

				.custom-panel-active ::v-deep .ant-collapse-header {
					color: #1677ff;
					opacity: 1;
				}

				.li-active {
					--color: #1677ff;
					--title-opacity: 1;
					--text-opacity: 0.8;
				}

				.li {
					display: flex;
					padding: 15px 12px;
					border-radius: 16px;
					background-color: #0f141a;
					margin-bottom: 10px;
					cursor: pointer;

					.icon {
						padding: 4px 5px 0 0;
						display: inline-block;
						color: var(--color);
						opacity: var(--text-opacity);
					}

					.li-content {

						.name {
							color: var(--color);
							opacity: var(--title-opacity);
							font-size: 14px;
						}

						.time {
							color: var(--color);
							opacity: var(--text-opacity);
							font-size: 12px;
						}
					}
				}
			}

			.list-box::-webkit-scrollbar {
				background-color: #1b2128;
				width: 10px;
			}

			.list-box::-webkit-scrollbar-thumb {
				background-color: #576470;
				border-radius: 20px;
				height: 30rpx;
			}
		}

		.footer {
			width: 1280px;
			margin: 30px auto 50px auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				.title {
					font-size: 24px;
				}

				.synopsis {
					margin-top: 20px;
					font-size: 16px;
					width: 700px;
					color: #495770;
					line-height: 25px;
				}

				.text {
					margin-top: 20px;
					font-size: 16px;
					color: #495770;
				}
			}

			.right {
				.play-btn {
					width: 345px;
					height: 55px;
					border-radius: 50px;
					font-size: 20px;
					letter-spacing: 2px;
				}
			}
		}
	}
</style>